<!--
font awesome 图标表
https://m.runoob.com/font-awesome/fontawesome-reference.html
-->

<!doctype html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>easyIM-WEB版客户端-聊天</title>

    <!-- Favicon -->
    <link rel="icon" href="static/dist/media/img/favicon.png" type="image/png">

    <!-- Soho css -->
    <!--<link rel="stylesheet" href="static/dist/css/soho.css">-->
    <!--<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">-->


    <link rel="stylesheet" href="http://apps.bdimg.com/libs/fontawesome/4.2.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="static/dist/css/chat.css">

    <link type="text/css" rel="stylesheet" href="static/dist/bootstrap.min.css"/>
    <link type="text/css" rel="stylesheet" href="static/dist/bootstrap-vue.min.css"/>
    <!--<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>-->
    <script src="static/dist/vue.min.js"></script>
    <script src="static/dist/bootstrap-vue.min.js"></script>
    <!--<script src="static/dist/bootstrap-vue-icons.min.js"></script>-->
    <!-- Cookie -->
    <script src="//cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
    <script src="faces.js"></script>
    <script src="utils.js"></script>
    <script src="static/dist/echatim-sdk.js"></script>
    <script src="main.js"></script>

    <style>
        .friend_list_tabs {
            padding-top: 0;
        }

        ::-webkit-scrollbar {
            width: 2px;
            background-color: #0e487c;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #4facfa;
        }
    </style>

</head>

<body class="body" >



<div id="app" class="" style="display:none; background: #f8f9fac2;">
    <!-- layout -->
    <div class="layout">
        <!-- content -->
        <div class="content">

            <!-- sidebar group -->
            <div id="chat-list-window" class="sidebar-group chat-list-window" style="height: 648px">

                <!-- Chats sidebar -->
                <div id="chat-list" class="sidebar active" style="border: 1px solid #8e8585;padding: 1px">
                    <div style="display: flex;justify-content: space-between">

                        <ul class="list-inline" style="display: flex;align-items: center">
                            <li style="margin: 6px" class="list-inline-item" data-toggle="tooltip" title="New Group">
                                <img @click="showModifyAvatarModal('self')" style="width: 60px;height: 60px;border-radius:30px" :src="userInfo.avatar"/>
                            </li>
                            <li class="list-inline-item" style="margin: 0px">
                                <div>
                                    <span>{{userInfo.name}}</span>
                                    <span style="display:block;font-size: 6px">{{online==1 ? '[在线]' : '[离线]'}}</span>
                                </div>
                            </li>
                        </ul>


                        <ul class="list-inline">
                            <li class="list-inline-item">
                                <!--<i v-b-modal="'modify-userinfo-modal'" class="fa fa-cog"></i>-->
                                <i v-on:click="showModifyUserInfoModal" class="fa fa-cog"></i>
                                <i v-b-modal="'logout-modal'" class="fa fa-external-link"></i>
                                <i v-on:click="hideChatApp" class="fa fa-close"></i>
                            </li>
                        </ul>
                    </div>
                    <div>
                        <b-tabs content-class="mt-3 friend_list_tabs" style="padding-top: 0px">
                            <b-tab class="chat-body" style="max-height: 480px;overflow: scroll;overflow-x: hidden" title="最近" active>
                                <div class="chat">
                                    <ul class="list-group list-group-flush">
                                        <template v-for="v in sessionTopList">
                                            <li v-if="v=='添加好友'" @click="addFriendModal" class="chat-list-group-item list-group-item">
                                                <figure class="avatar">
                                                    <i class="chat-list-icon fa fa-plus"></i>
                                                </figure>
                                                <div class="">
                                                    <h5>添加好友</h5>
                                                </div>
                                            </li>
                                            <!--<li v-if="v=='添加讨论组'" @click="appendRoomUserModal(14)" class="chat-list-group-item list-group-item">-->
                                            <li v-if="v=='添加讨论组'" @click="addRoomModal" class="chat-list-group-item list-group-item">
                                                <figure class="avatar">
                                                    <i  class="chat-list-icon fa fa-plus"></i>
                                                </figure>
                                                <div class="">
                                                    <h5>添加讨论组</h5>
                                                </div>
                                            </li>
                                            <li v-if="v=='系统消息'" @click="selectWindowTab('system')"
                                                class="chat-list-group-item list-group-item">
                                                <figure class="avatar">
                                                    <i class="chat-list-icon fa fa-comment"></i>
                                                </figure>
                                                <div class="">
                                                    <h5>系统消息</h5>
                                                </div>
                                            </li>
                                        </template>
                                        <template v-for="v in sessionList">
                                            <li class="chat-list-group-item list-group-item" @click="selectWindowTab('chat',v, 'session')">
                                                <figure class="avatar">
                                                    <!-- 显示对方的头像 -->
                                                    <img :src="v.toTargetAvatar" class="rounded-circle">
                                                </figure>
                                                <div class="users-list-body">
                                                    <!-- 显示对方的名字 -->
                                                    <h5>{{v.toTargetName}}{{v.online === 1 ? '[在线]' : ''}}</h5>
                                                    <!-- 显示最后一条消息 -->
                                                    <p v-if="v.type=='TEXT'">{{v.body.body}}</p>
                                                    <p v-if="v.type=='IMAGE'">[图片]</p>
                                                    <p v-if="v.type=='FILE'">[文件]</p>
                                                    <div v-if="listExtraInfo.hasOwnProperty(v.toTarget) && listExtraInfo[v.toTarget].unread > 0" class="users-list-action">
                                                        <!--<div class="new-message-count">{{listExtraInfo.hasOwnProperty(v.toTarget) ? listExtraInfo[v.toTarget].unread : ''}} </div>-->
                                                        <div class="new-message-count">{{listExtraInfo[v.toTarget].unread}} </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </template>
                                    </ul>
                                </div>
                            </b-tab>
                            <b-tab class="chat-body" style="max-height: 480px;overflow: scroll;overflow-x: hidden" title="联系人">
                                <div class="chat">
                                    <ul class="list-group list-group-flush">
                                        <template v-for="v in friendList">
                                            <li class="chat-list-group-item list-group-item" @click="selectWindowTab('chat',v, 'friend')">
                                                <figure class="avatar">
                                                    <!-- 显示对方的头像 -->
                                                    <img :src="v.avatar" class="rounded-circle">
                                                </figure>
                                                <div class="users-list-body">
                                                    <!-- 显示对方的别名/名字 -->
                                                    <h5>{{v.alias!=='' ? v.alias : v.name}}{{v.online === 1 ? '[在线]' : ''}}</h5>
                                                    <p></p>
                                                    <div v-if="listExtraInfo.hasOwnProperty(v.auid) && listExtraInfo[v.auid].unread > 0" class="users-list-action">
                                                        <!--<div class="new-message-count">{{listExtraInfo.hasOwnProperty(v.toTarget) ? listExtraInfo[v.toTarget].unread : ''}} </div>-->
                                                        <div class="new-message-count">{{listExtraInfo[v.auid].unread}} </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </template>
                                    </ul>
                                </div>
                            </b-tab>
                            <b-tab title="讨论组">
                                <div class="chat">
                                    <ul class="list-group list-group-flush">
                                        <template v-for="v in roomList">
                                            <li class="chat-list-group-item list-group-item" @click="selectWindowTab('chat',v, 'room')">
                                                <figure class="avatar">
                                                    <!-- 显示群的头像 -->
                                                    <img :src="v.avatar" class="rounded-circle">
                                                </figure>
                                                <div class="users-list-body">
                                                    <!-- 显示群的名字 -->
                                                    <h5>{{v.name}}</h5>
                                                    <p></p>
                                                    <div v-if="listExtraInfo.hasOwnProperty(v.rid) && listExtraInfo[v.rid].unread > 0" class="users-list-action">
                                                        <!--<div class="new-message-count">{{listExtraInfo.hasOwnProperty(v.toTarget) ? listExtraInfo[v.toTarget].unread : ''}} </div>-->
                                                        <div class="new-message-count">{{listExtraInfo[v.rid].unread}} </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </template>
                                    </ul>
                                </div>
                            </b-tab>
                        </b-tabs>
                    </div>

                </div>
                <!-- ./ Chats sidebar -->
            </div>
            <!-- ./ sidebar group -->

            <!-- chat -->
            <div v-if="windowTab=='chat'" id="chat-window" class="chat-content-window chat"
                 style="border: 1px solid #8e8585;padding: 1px;border-radius:3px">
                <div class="chat-header">
                    <ul class="list-inline" style="display: flex;align-items: center">
                        <li style="margin: 6px" class="list-inline-item" data-toggle="tooltip" title="New Group">
                            <img v-if="(chatsContent.select=='friend' || chatsContent.select=='session')" style="width: 60px;height: 60px;border-radius:30px"  :src="chatsContent.friendInfo.avatar" />
                            <img v-if="chatsContent.select=='room'" @click="showModifyAvatarModal('room')" style="width: 60px;height: 60px;border-radius:30px"  :src="chatsContent.roomInfo.avatar" />
                        </li>
                        <li class="list-inline-item" style="margin: 0px">
                            <div>
                                <span>{{(chatsContent.select=='friend' || chatsContent.select=='session') ? chatsContent.friendInfo.name : chatsContent.roomInfo.name}}</span>
                                <span v-if="(chatsContent.select=='friend' || chatsContent.select=='session')" style="display:block;font-size: 6px">{{chatsContent.friendInfo.online === 1 ? '[在线]' : '[离线]'}}</span>
                            </div>
                        </li>
                    </ul>
                    <div class="chat-header-action">
                        <ul class="list-inline">
                            <li class="list-inline-item">
                                <!--<b-icon v-b-modal="'modify-friendinfo-modal'" style="color:#909294" icon="gear-fill"-->
                                        <!--variant=""></b-icon>-->
                                <i v-if="chatsContent.select=='friend'" v-on:click="showModifyFriendAliasModal" class="fa fa-cog"></i>
                                <i v-if="chatsContent.select=='room'" v-on:click="showModifyRoomInfoModal" class="fa fa-cog"></i>
                                <i v-on:click="closeChatWindows" class="fa fa-close"></i>
                            </li>
                        </ul>
                    </div>
                </div>
                <div id="chat-body-container" class="chat-body"> <!-- .no-message -->
                    <div class="messages">
                        <template v-for="msg in chatsContent.chats">
                            <div v-if="msg.type=='TEXT'" :class="msg.toMe==1 ? 'message-item':'message-item outgoing-message'">
                                <div class="message-content">
                                    {{chatsContent.select === 'room' ? msg.fromUser+'-->:' : ''}}
                                    <span v-html = '$options.filters.faceMessage(msg.body)'>
                                    </span>
                                </div>
                                <div class="message-action">
                                    {{msg.createTime}}
                                </div>
                            </div>
                            <div v-if="msg.type=='IMAGE'" :class="msg.toMe==1 ? 'message-item':'message-item outgoing-message'">
                                <div class="message-content message-file">
                                    <img @click="showFullImage(msg.body.body)" style="width: 80px" :src="msg.body.body" :alt="msg.body.name"/>
                                </div>
                                <div class="message-action">
                                    {{msg.createTime}}
                                </div>
                            </div>
                            <div v-if="msg.type=='FILE'" :class="msg.toMe==1 ? 'message-item':'message-item outgoing-message'">
                                <div class="message-content message-file">
                                    <div class="file-icon">
                                        <i class="ti-file"></i>
                                    </div>
                                    <div>
                                        <div>{{msg.body.name}}<i class="text-muted small">({{msg.body.size}}KB)</i></div>
                                        <ul class="list-inline">
                                            <li class="list-inline-item"><a :href="msg.body.body">下载</a></li>
                                            <!--<li class="list-inline-item"><a href="#">View</a></li>-->
                                        </ul>
                                    </div>
                                </div>
                                <div class="message-action">
                                    {{msg.createTime}}
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
                <div class="chat-footer">
                    <form action="" onkeydown="if(event.keyCode===13)return false;">
                        <input v-model="msgContent.text" @keyup.enter="sendMessage((chatsContent.select=='friend' || chatsContent.select=='session') ? 'P2P' : 'P2R', 'TEXT', {body:msgContent.text})" type="text" class="form-control" placeholder="请输入内容"
                               aria-label="Recipient's username" aria-describedby="button-addon2">
                        <div class="form-buttons">
                            <button v-b-modal="'select-face-modal'" class="btn btn-light btn-floating" type="button">
                                <i class="fa fa-meh-o"></i>
                            </button>
                            <button id="sendImageMessage"  class="btn btn-light btn-floating" type="button">
                                <i class="fa fa-image"></i>
                            </button>

                            <button id="sendFileMessage"  class="btn btn-light btn-floating" type="button">
                                <i class="fa fa-file"></i>
                            </button>
                            <button @click="sendMessage((chatsContent.select=='friend' || chatsContent.select=='session') ? 'P2P' : 'P2R', 'TEXT', {body:msgContent.text})" class="btn btn-primary btn-floating" type="button">
                                <i class="fa fa-send"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            <!-- ./ chat -->
            <!-- system message -->
            <div v-if="windowTab=='system'" id="system-message-window" class="chat-content-window chat"
                 style="border: 1px solid #8e8585;padding: 1px;border-radius:3px">
                <div class="chat-header">
                    <ul class="list-inline" style="display: flex;align-items: center">
                        <li style="margin: 6px" class="list-inline-item" data-toggle="tooltip" title="New Group">
                            <img style="width: 60px;height: 60px;border-radius:30px"
                                 src="static/dist/media/img/man_avatar1.jpg"/>
                        </li>
                        <li class="list-inline-item" style="margin: 0px">
                            <div>
                                <span>系统消息</span>
                                <span style="display:block;font-size: 6px">[离线]</span>
                            </div>
                        </li>
                    </ul>
                    <div class="chat-header-action">
                        <ul class="list-inline">
                            <li class="list-inline-item">
                                <b-icon style="color:#909294" icon="gear-fill" variant=""></b-icon>
                            </li>
                        </ul>
                    </div>
                </div>
                <div id="system-body-container"  class="chat-body"> <!-- .no-message -->
                    <div class="messages">
                        <template v-for="msg in systemMessages">
                            <div class="message-item">
                                <div class="message-content">
                                    {{msg.text}}
                                </div>
                                <div class="message-action">
                                    {{msg.createTime}}
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
            <!-- ./ system message -->

        </div>
        <!-- ./ content -->

    </div>


    <!-- 登出-模态框 -->
    <b-modal id="logout-modal" size="sm" @ok="userLogout" ok-title="确定" cancel-title="取消" title="是否退出登录?">
    </b-modal>

    <!-- 修改头像-模态框 -->
    <b-modal id="modify-avatar-modal" size="sm" @ok="modifyAvatar" @shown="afterShowAvatar" ok-title="确定" cancel-title="取消" title="修改头像">
        <div>
            <b-img style="width: 60px;height: 60px;border-radius:30px" center :src="avatarType=='self' ? userInfo.avatar : chatsContent.roomInfo.avatar" alt="Center image"></b-img>
            <br/>
            <b-button id="uploadAvatar"  block variant="danger">上传头像</b-button>
        </div>
    </b-modal>

    <!-- 添加好友-模态框 -->
    <b-modal id="add-friend-modal" size="sm" @ok="addFriend" ok-title="添加" cancel-title="取消" title="添加好友">
        <div>
            <b-form-input v-model="friendAdd.auid" type="text" debounce="500"></b-form-input>
            <!--<div class="mt-2">Value: "{{ value }}"</div>-->
        </div>
        <br/>
    </b-modal>


    <!-- 添加讨论组-模态框 -->
    <b-modal id="add-room-modal"  @ok="addRoom" ok-title="添加" cancel-title="取消" title="添加讨论组">
        <div style="display: flex;justify-content: space-between">
            <div style="width: 100%;flex-grow: 1;">
                待添加
                <template v-for="v in friendToAddRoomList">
                    <li class="chat-list-group-item list-group-item" style="border: 0px">
                        <b-form-checkbox
                                @change="selectUserToRoom(v.auid)"
                                :id="'checkbox_'+v.auid"
                                v-model="v.selected"
                                value="1"
                                unchecked-value="0"
                                :name="'checkbox_'+v.auid">
                        </b-form-checkbox>
                        <figure class="avatar">
                            <!-- 显示对方的头像 -->
                            <img :src="v.avatar" class="rounded-circle">
                        </figure>
                        <div class="users-list-body">
                            <!-- 显示对方的别名/名字 -->
                            <h5>{{v.alias!=='' ? v.alias : v.name}}</h5>
                            <p></p>
                        </div>
                    </li>
                </template>
            </div>
            <div style="width: 2px;background: #00000040;"></div>
            <div style="width: 100%;flex-grow: 1;">
                已添加
                <template v-for="v in friendToAddRoomList">
                    <li v-if="v.selected==='1'" class="chat-list-group-item list-group-item" style="border: 0px">

                        <figure class="avatar">
                            <!-- 显示对方的头像 -->
                            <img :src="v.avatar" class="rounded-circle">
                        </figure>
                        <div class="users-list-body">
                            <!-- 显示对方的别名/名字 -->
                            <h5>{{v.alias!=='' ? v.alias : v.name}}</h5>
                            <p></p>
                        </div>
                    </li>
                </template>
            </div>
        </div>
        <br/>
    </b-modal>

    <!-- 编辑用户资料-模态框 -->
    <b-modal id="modify-userinfo-modal" @ok="modifyUserInfo" ok-title="编辑" cancel-title="取消" title="编辑用户资料">
        <div>
            <b-form-group label-cols="4" label-cols-lg="2" label="生日" label-for="input-default">
                <b-form-input v-model="userInfo.birth"></b-form-input>
            </b-form-group>
            <b-form-group label-cols="4" label-cols-lg="2" label="手机" label-for="input-default">
                <b-form-input v-model="userInfo.mobile"></b-form-input>
            </b-form-group>
            <b-form-group label-cols="4" label-cols-lg="2" label="邮箱" label-for="input-default">
                <b-form-input v-model="userInfo.email"></b-form-input>
            </b-form-group>
            <b-form-group label-cols="4" label-cols-lg="2" label="签名" label-for="input-default">
                <b-form-input v-model="userInfo.sign"></b-form-input>
            </b-form-group>
        </div>
        <br/>
    </b-modal>


    <!-- 编辑好友资料-模态框 -->
    <b-modal id="modify-friendinfo-modal" @ok="modifyFriendAlias" ok-title="编辑" cancel-title="取消" title="编辑好友资料">
        <div>
            <b-form-group label-cols="4" label-cols-lg="2" label="备注" label-for="input-default">
                <b-form-input v-model="chatsContent.friendInfo.alias"></b-form-input>
            </b-form-group>
            <b-form-group label-cols="4" label-cols-lg="2" label="生日" label-for="input-default">
                <b-form-input v-model="chatsContent.friendInfo.birth" disabled="disabled" readonly></b-form-input>
            </b-form-group>
            <b-form-group label-cols="4" label-cols-lg="2" label="手机" label-for="input-default">
                <b-form-input v-model="chatsContent.friendInfo.mobile" disabled="disabled" readonly></b-form-input>
            </b-form-group>
            <b-form-group label-cols="4" label-cols-lg="2" label="邮箱" label-for="input-default">
                <b-form-input v-model="chatsContent.friendInfo.email" disabled="disabled" readonly></b-form-input>
            </b-form-group>
            <b-form-group label-cols="4" label-cols-lg="2" label="签名" label-for="input-default">
                <b-form-input v-model="chatsContent.friendInfo.sign" disabled="disabled" readonly></b-form-input>
            </b-form-group>

            <b-form-group label-cols="4" label-cols-lg="2" label="禁言" label-for="input-default">
                <b-form-checkbox style="margin-top: 4px" v-model="chatsContent.friendInfo.forbid"
                                 @change="modifyFriendForbid" name="check-button" switch size="lg">
                </b-form-checkbox>
            </b-form-group>
            <b-form-group label-cols="4" label-cols-lg="2" label="黑名单" label-for="input-default">
                <b-form-checkbox style="margin-top: 4px" v-model="chatsContent.friendInfo.blacklist"
                                 @change="modifyFriendBlackList" name="check-button" switch
                                 size="lg">
                </b-form-checkbox>
            </b-form-group>
            <div>
                <b-button @click="delFriend" block variant="danger">删除好友</b-button>
            </div>
        </div>
        <br/>
    </b-modal>

    <!-- 编辑讨论组资料-模态框 -->
    <b-modal id="modify-roominfo-modal" @ok="modifyRoomInfo" ok-title="编辑" cancel-title="取消" title="编辑讨论组资料">
        <div>
            <b-form-group label-cols="4" label-cols-lg="2" label="群名" label-for="input-default">
                <b-form-input v-model="chatsContent.roomInfo.name"></b-form-input>
            </b-form-group>
            <b-form-group label-cols="4" label-cols-lg="2" label="群公告" label-for="input-default">
                <b-form-input v-model="chatsContent.roomInfo.announce" ></b-form-input>
            </b-form-group>
            <b-form-group label-cols="4" label-cols-lg="2" label="群简介" label-for="input-default">
                <b-form-input v-model="chatsContent.roomInfo.introduce" ></b-form-input>
            </b-form-group>
            <!--<b-form-group label-cols="4" label-cols-lg="2" label="群LOGO,头像" label-for="input-default">-->
                <!--<b-form-input v-model="chatsContent.roomInfo.avatar" ></b-form-input>-->
            <!--</b-form-group>-->
            <b-form-group label-cols="4" label-cols-lg="2" label="群加入模式" label-for="input-default">
                <b-form-select v-model="chatsContent.roomInfo.confJoinmode" class="mb-3">
                    <!--<b-form-select-option :value="null">Please select an option</b-form-select-option>-->
                </b-form-select>
            </b-form-group>
            <b-form-group label-cols="4" label-cols-lg="2" label="群员被邀请方式" label-for="input-default">
                <b-form-select v-model="chatsContent.roomInfo.confBeinvite" class="mb-3">
                    <!--<b-form-select-option :value="null">Please select an option</b-form-select-option>-->
                </b-form-select>
            </b-form-group>
            <b-form-group label-cols="4" label-cols-lg="2" label="群员邀请权限" label-for="input-default">
                <b-form-select v-model="chatsContent.roomInfo.confInviteother" class="mb-3">
                    <!--<b-form-select-option :value="null">Please select an option</b-form-select-option>-->
                    <b-form-select-option value="OWNER">仅群主</b-form-select-option>
                    <b-form-select-option value="ALL">任何人也可以</b-form-select-option>
                </b-form-select>
            </b-form-group>
            <b-form-group label-cols="4" label-cols-lg="2" label="群信息更新权限" label-for="input-default">
                <b-form-select v-model="chatsContent.roomInfo.confUpdate" class="mb-3">
                    <!--<b-form-select-option :value="null">Please select an option</b-form-select-option>-->
                    <b-form-select-option value="OWNER">仅群主</b-form-select-option>
                    <b-form-select-option value="ALL">任何人也可以</b-form-select-option>
                </b-form-select>
            </b-form-group>
            <b-form-group label-cols="4" label-cols-lg="2" label="群最大成员数量" label-for="input-default">
                <b-form-input v-model="chatsContent.roomInfo.maxMember" ></b-form-input>
            </b-form-group>
            <div>
                <b-button @click="" block variant="danger">退出讨论组</b-button>
            </div>
        </div>
        <br/>
    </b-modal>


    <!-- 表情-模态框 -->
    <b-modal id="select-face-modal" @ok="" hide-header="false"  hide-backdrop content-class="shadow"  hide-footer="false" centered="true" ok-title="确定" cancel-title="取消" title="选择表情">
        <div>
            <template v-for="f in faces">
                <img class="face-image-select" @click="appendFace(f.name)" :src="'static/dist/face/' + f.resource" />
            </template>
        </div>
    </b-modal>

    <!-- 图片/文件-模态框 -->
    <b-modal id="select-file-modal" @ok="" hide-header="false"  hide-backdrop content-class="shadow"  hide-footer="false" centered="true" ok-title="确定" cancel-title="取消" title="选择文件/图片">
        <div>
            <div>
                <b-button @click="sendImage"  block variant="">选择文件/图片</b-button>
            </div>
        </div>
    </b-modal>


</div>


</body>
<!--<script src="static/dist/helium.js" onload="helium.init();">-->
<script>

    if(!Cookies.get('userAuid') || !Cookies.get('userToken')){
        window.location.href = 'login.html';
    }
</script>

</html>
